

document.querySelector("#example").addEventListener("click", evt => {
  example.classList.add("animating");
  [x, y] = [evt.clientX, evt.clientY];
  start = performance.now();
  requestAnimationFrame(function raf(now) {
    const count = Math.floor(now - start);
    example.style.cssText = `--ripple-x: ${x}; --ripple-y: ${y}; --animation-tick: ${count};`;
    if (count > 1000) {
      example.classList.remove("animating");
      example.style.cssText = `--animation-tick: 0`;
      return;
    }
    requestAnimationFrame(raf);
  });
});